<template>
    <svg :class="svgClass" v-bind="$attrs">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script lang='ts' setup>
import { computed } from 'vue';

interface IProps {
    name: string
}
const props = withDefaults(defineProps<IProps>(), {
    name: "yonghu",
})

const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
    if (props.name) return `svg-icon icon-${props.name}`
    return 'svg-icon'
})

</script>

<style>
.svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    transition: all .3s;
}

</style>